<template>
  <el-scrollbar style="width: 100%;height: 100%">
    <el-row v-for="(row, rowIndex) in rows" :key="rowIndex" :style="{ width: '100%',height: '55px', borderTop: rowIndex === 0 ? 'none' : '1px dashed #01594a' }">
      <el-col :span="4" style="display: flex; align-items: center;">
        <el-text style="font-size: 18px; color: #028370; margin-left: 20px">{{ row.label }}</el-text>
      </el-col>
      <el-col :span="20" style="display: flex;">
        <div style="display: flex; align-items: center; height: 100%; width: 10%">
          <el-button
              v-for="(button, buttonIndex) in row.buttons"
              :key="buttonIndex"
              :style="{ backgroundColor: isButtonSelected(rowIndex, buttonIndex) ? '#00CAC9' : '' }"
              @click="toggleButtonSelection(rowIndex, buttonIndex)"
              round>
            <el-text :style="{ color: isButtonSelected(rowIndex, buttonIndex) ? 'white' : '' }">{{ button.text }}</el-text>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-scrollbar>
  <!-- 编辑界面 -->
  <el-dialog title="新增关键词" v-model="keyWordFormVisible" width="30%" align-center center>
    <el-form>
      <el-form-item label="关键词名称">
        <el-input v-model="newKeyWord" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="keyWordFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addKeyWord">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
//按钮查询和初始化
import {onMounted, ref, watch} from "vue";
//列表查询
onMounted(() => {
  initializeButtons();
});
const props = defineProps({
  filterRows: Array,
})
const emit = defineEmits(['updateList']);
const rows = ref(props.filterRows);
watch(() => props.filterRows, (newValue) => {
  rows.value = newValue;
});

const isButtonSelected = (rowIndex, buttonIndex) => {
  return rows.value[rowIndex].buttons[buttonIndex].selected;
};
const initializeButtonsSelection = (rowIndex, buttonIndex)=>{
  rows.value[rowIndex].buttons[buttonIndex].selected = true
}
const toggleButtonSelection = (rowIndex, buttonIndex) => {
  // 获取当前行的按钮数组
  const buttons = rows.value[rowIndex].buttons;
  // 遍历当前行的所有按钮
  for (let i = 0; i < buttons.length; i++) {
    // 将当前点击的按钮的 selected 属性设置为 true
    buttons[i].selected = i === buttonIndex;
  }
  console.log(1)
  emit('updateList',rows.value)
};
const initializeButtons = () => {
  // 初始化每行的“全部”按钮为选中状态
  rows.value.forEach((row, rowIndex) => {
    const allButtonIndex = row.buttons.findIndex(button => button.text === '-全部-');
    if (allButtonIndex !== -1) {
      initializeButtonsSelection(rowIndex, allButtonIndex);
    }
  });
};

const keyWordFormVisible = ref(false)
const newKeyWord = ref('');
const addKeyWord = () => {
// 获取要添加的关键词
  const keywordToAdd = { text: newKeyWord.value, selected: false };
  // 找到医嘱关键词对应的行
  const medicalAdviceRow = rows.value.find(row => row.label === '医嘱关键词');

  // 如果找到了医嘱关键词对应的行，则将关键词添加到按钮数组中
  if (medicalAdviceRow) {
    medicalAdviceRow.buttons.push(keywordToAdd);
  } else {
    // 如果没找到，则创建一个新的行
    rows.value.push({ label: '医嘱关键词', buttons: [keywordToAdd] });
  }
  // 清空newKeyWord
  newKeyWord.value = '';
  //关闭弹窗
  keyWordFormVisible.value = false;
}
</script>
<style scoped>

</style>